<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { onMounted } from 'vue'

const props = withDefaults(defineProps<{
    isEditable: boolean
}>(), {
    isEditable: false,
})
const { isEditable } = toRefs(props)

const longitude = defineModel<number | undefined>('longitude', { required: true })
const latitude = defineModel<number | undefined>('latitude', { required: true })

let map: any = null // 初始化地图
function initMap() {
    AMapLoader.load({
        key: '8e125d7a61c3c334ca9538a5c6798582', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins: [
            'AMap.Geocoder',
            'AMap.PlaceSearch',
            'AMap.Scale', // 工具条，控制地图的缩放、平移等
            'AMap.ToolBar', // 比例尺，显示当前地图中心的比例尺
            'AMap.Geolocation', // 定位，提供了获取用户当前准确位置、所在城市的方法
            'AMap.HawkEye', // 鹰眼，显示缩略图
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            // console.log('初始化地图', longitude.value, latitude.value)
            map = new AMap.Map('map', {
                center: [longitude.value || 114.304569, latitude.value || 30.593354], // 初始化地图中心点位置
                doubleClickZoom: true, // 双击放大缩小
                dragEnable: !!isEditable.value, // 禁止鼠标拖拽
                keyboardEnable: true, // 键盘控制放大缩小移动旋转
                scrollWheel: true, // 鼠标滚轮放大缩小
                viewMode: '2D', // 是否为3D地图模式
                // 设置地图容器id
                zoom: 15, // 初始化地图层级
            })
            map.setDefaultCursor('pointer') // 使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
            map.addControl(new AMap.Scale()) // 异步同时加载多个插件
            map.addControl(new AMap.ToolBar())
            // 显示地图层级与中心点信息
            function logMapinfo() {
                const zoom = map.getZoom() // 获取当前地图级别
                const center = map.getCenter() // 获取当前地图中心位置
                console.log(zoom, center)
            }
            // 绑定地图移动与缩放事件
            map.on('moveend', logMapinfo)
            map.on('zoomend', logMapinfo)
            if (isEditable.value) {
                // 编辑click事件获取鼠标点击出的经纬度坐标
                map.on('click', (e: any) => {
                    longitude.value = e.lnglat.getLng()
                    latitude.value = e.lnglat.getLat()
                })
            }
            else {
                // 查看反显中心点
                map.add(
                    new AMap.Marker({
                        position: map.getCenter(),
                    }),
                )
            }
        })
        .catch((e) => {
            console.log(e)
        })
}

onMounted(() => {
    initMap()
})
</script>

<template>
    <div class="box">
        <div id="map" />
    </div>
</template>

<style lang="scss" scoped>
.box {
    width: 100% !important;
    height: 100% !important;
}
#map {
    width: 100%;
    height: 120px;
}
</style>
